import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        list:[],  //所有的任务列表
        inputValue:'',
        nextId:5,
        viewKey:'all',
    },
    mutations:{
        initList(state,list){
            state.list=list;
        },
        setInputValue(state,val){
            state.inputValue=val;
        },
        addItem(state){
            const obj = {
                id:state.nextId,
                info:state.inputValue.trim(),
                done:false,
            };
            state.list.push(obj);
            ++state.nextId;
            state.inputValue='';
        },
        removeItem(state,id){
            // 根据id 查找索引
            const index=state.list.findIndex(x => x.id===id);
            if(index!==-1){
                state.list.splice(index,1);
            }
        },
        changeStatus(state,param){
            const i = state.list.findIndex(x => x.id===param.id);
            if(i!==-1){
                state.list[i].done=param.status;
            }
            console.log(state.list);
        },
        cleanFinished(state){
            state.list=state.list.filter(x => x.done === false);
        },
        changeViewKey(state,key){
            state.viewKey=key;
        }
    },
    actions:{
        getList(context){
            axios.get('/list.json').then(({data})=>{
                context.commit('initList',data);
            })
        }
    },
    getters:{
        unfinishedLength(state){
            return state.list.filter(x => x.done === false).length;
        },
        infoList(state){
            if(state.viewKey==='all'){
                return state.list;
            }else if(state.viewKey==='unfinished'){
                return state.list.filter(x=>x.done===false);
            }else{
                return state.list.filter(x=>x.done);
            }
        }
    }
})